<template>
  <div>
    <el-row>
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">灰太狼2号号码预测</div>
        <k-progress status="success" type="line" :percent="percent">
        </k-progress>
      </el-col>
    </el-row>
    <div class="search-term">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
        <el-form-item label="a">
          <el-input
            v-model="formData.anumber"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item label="b:">
          <el-input
            v-model="formData.bnumber"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item label="c:">
          <el-input
            v-model="formData.cnumber"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item label="a-b相隔:">
          <el-input
            v-model="formData.abnumber"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item label="b-c相隔:">
          <el-input
            v-model="formData.bcnumber"
            clearable
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="sousuo" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tongjiTabledata"
      @selection-change="handleSelectionChange"
      border
      ref="multipleTable"
      stripe
      tooltip-effect="dark"
      show-summary
      :height="600"
    >
      <el-table-column label="a" width="120" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.anumber }}</div>
        </template>
      </el-table-column>

      <el-table-column label="b" width="120" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.bnumber }}</div>
        </template>
      </el-table-column>

      <el-table-column label="c" width="120" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.cnumber }}</div>
        </template>
      </el-table-column>
      <el-table-column label="ab相差期数" width="120" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.ab_index }}</div>
        </template>
      </el-table-column>

      <el-table-column label="bc相差期数" width="120" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.bc_index }}</div>
        </template>
      </el-table-column>

      <el-table-column label="次数" width="120" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.count }}</div>
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit"
            @click="editApi(scope.row)"
            >显示日期</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit"
            @click="opendialogtubiao(scope.row)"
            >显示图表</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :before-close="closeDialog"
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
    >
      <div>选择号码：{{ zuijiahaoma }}</div>
      <div>当前共出现{{ zuijiacount }}次</div>
      <el-row :gutter="2">
        <div v-for="(item, index) in items" :key="item">
          <el-col :span="5">
            <div label="单行文本">
              第{{ index + 1 }}次：
              <li v-for="value in item" :key="value">
                {{ value[3] }}
              </li>
            </div>
          </el-col>
        </div>
      </el-row>
    </el-dialog>

    <el-dialog
      :before-close="closedialogtubiaoVisible"
      :title="dialogTitle"
      :visible.sync="dialogtubiaoVisible"
    >
      <div>选择号码：{{ zuijiahaoma }}</div>
      <div>当前共出现{{ zuijiacount }}次</div>
      <el-row :gutter="2">
        <div
          v-for="(item, index, vlaue) in tubiaodata"
          :key="index"
          height="900px"
        >
          <el-col :span="4">
            <view v-if="parseInt(vlaue) % 4 == 0">222</view>
            <div label="单行文本">{{ vlaue }}第{{ index }}月份：</div>
            <table width="100%" border="1" height="900px">
              <div>
                <tr>
                  <td style="border: solid; width: 30px">时间</td>
                  <td style="border: solid; width: 16%">1</td>
                  <td style="border: solid; width: 16%">2</td>
                  <td style="border: solid; width: 16%">3</td>
                  <td style="border: solid; width: 16%">4</td>
                  <td style="border: solid; width: 16%">5</td>
                </tr>
              </div>
              <div v-for="(iitem, iidex) in item" :key="iidex">
                <tr>
                  <td style="border: solid; width: 30px">
                    <span v-if="iidex < 10">0{{ iidex }}</span>
                    <span v-else> {{ iidex }}</span>
                  </td>

                  <td :style="jisuannumber(iitem.number1, iitem.ID)">
                    {{ iitem["number1"] }}
                  </td>

                  <td :style="jisuannumber(iitem.number2, iitem.ID)">
                    {{ iitem["number2"] }}
                  </td>

                  <td :style="jisuannumber(iitem.number3, iitem.ID)">
                    {{ iitem["number3"] }}
                  </td>

                  <td :style="jisuannumber(iitem.number4, iitem.ID)">
                    {{ iitem["number4"] }}
                  </td>

                  <td :style="jisuannumber(iitem.number5, iitem.ID, iitem)">
                    {{ iitem["number5"] }}
                  </td>
                </tr>
              </div>
            </table>
          </el-col>
        </div>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSysCaipiaoNumbersList,
  getLengSysCaipiaoNumbers,
} from "@/api/sysCaipiaoNumbers"; //  此处请自行替换地址
import { formatTimeToStr } from "@/utils/date";
import infoList from "@/mixins/infoList";
import { configure } from "highlight.js";
export default {
  name: "SysCaipiaoNumbers",
  mixins: [infoList],
  data() {
    return {
      that: this,
      listApi: getSysCaipiaoNumbersList,
      dialogFormVisible: false,
      dialogtubiaoVisible: false,
      type: "",
      multipleSelection: [],
      sys_project_idOptions: [],
      formData: {
        time: new Date(),
        number1: "",
        number2: "",
        number3: "",
        number4: "",
        number5: "",
        projectId: 0,
        project_id: 539,
        qishu: 3000,
        anumber: "33",
        bnumber: "35",
        cnumber: "17",
        abnumber: "",
        bcnumber: "",
        minqishu: "103/11/01",
        maxqishu: "103/11/12",
      },
      fudongMessage: {},
      countChazhi: {}, //统计每个出现的次数
      tongjiTabledata: [],
      tishiMessage: 0,
      dialogTitle: "号码预测",
      items: [], //具体查看某个号码出现的
      zuijiahaoma: "", //最佳号码，在点选后进行展示，格式如01,02,03
      zuijiacount: 0, //最佳号码次数，在点选进行现实
      tubiaodata: {},
      colorList: {},
      colornumber: [],
      percent: 10,
      loading: {},
      //   itemss: [], //其实跟item一样，但是不知道为什么这里不重新新建就会内存崩溃
      //   page: 1,
      //   pageSize: 100000,
    };
  },
  filters: {
    formatDate: function (time) {
      if (time != null && time != "") {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
      } else {
        return "";
      }
    },
    formatBoolean: function (bool) {
      if (bool != null) {
        return bool ? "是" : "否";
      } else {
        return "";
      }
    },
    tagTypeFiletr(value, that) {
      //const target = methodOptions.filter((item) => item.value === value)[0];
      //return target && `${target.type}`;
      let state = that.color_number_dict[parseInt(value)];
      return state;
    },
  },
  methods: {
    randomHexColor() {
      //随机生成十六进制颜色
      let colorarray = [
        "#CE0000",
        "#000079",
        "#F00078",
        "#D200D2",
        "#8600FF",
        "#009393",
        "#01B468",
        "#00A600",
        "#73BF00",
        "#A6A600",
        "#C6A300",
        "#EA7500",
      ];

      return colorarray[Math.floor(Math.random() * colorarray.length)];
      var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
      while (hex.length < 6) {
        //while循环判断hex位数，少于6位前面加0凑够6位
        hex = "0" + hex;
      }
      return "#" + hex; //返回‘#'开头16进制颜色
    },
    sousuo() {
      //去除掉非搜索内容以外的
      let data = [];
      let tiaojianarry = [];
      if (this.formData.anumber != "") {
        tiaojianarry.push(this.formData.anumber);
      }
      if (this.formData.bnumber != "") {
        tiaojianarry.push(this.formData.bnumber);
      }
      if (this.formData.cnumber != "") {
        tiaojianarry.push(this.formData.cnumber);
      }
      if (this.formData.abnumber != "") {
        tiaojianarry.push(this.formData.abnumber);
      }
      if (this.formData.bcnumber != "") {
        tiaojianarry.push(this.formData.bcnumber);
      }
      for (let index = 0; index < this.tongjiTabledata.length; index++) {
        let ab_index = this.tongjiTabledata[index].ab_index.toString();
        let bc_index = this.tongjiTabledata[index].bc_index.toString();
        let anumber = this.tongjiTabledata[index].anumber;
        let bnumber = this.tongjiTabledata[index].bnumber;
        let cnumber = this.tongjiTabledata[index].cnumber;
        window.console.log(tiaojianarry, this.tongjiTabledata[index]);

        if (this.formData.anumber != "" && anumber != this.formData.anumber) {
          continue;
        } else if (
          this.formData.bnumber != "" &&
          bnumber != this.formData.bnumber
        ) {
          continue;
        } else if (
          this.formData.cnumber != "" &&
          cnumber != this.formData.cnumber
        ) {
          continue;
        } else if (
          this.formData.abnumber != "" &&
          ab_index != this.formData.abnumber
        ) {
          continue;
        } else if (
          this.formData.bcnumber != "" &&
          bc_index != this.formData.bcnumber
        ) {
          continue;
        }
        data.push(this.tongjiTabledata[index]);

        tiaojianarry.push(this.formData.anumber);
      }
      this.tongjiTabledata = data;
    },
    jisuannumber: function (number, id, iitem) {
      //判断是否要加颜色
      //    this.itemss.indexOf(id) > -1 &&
      //   return false;
      //   +":" + aarr[0];
      let jieguo = this.colorList.hasOwnProperty(number + ":" + id);
      if (jieguo) {
        return (
          "border: solid; width: 16%; color: " +
          this.colorList[number + ":" + id]
        );
      }
      return "border: solid; width: 16%";
    },
    async editApi(row) {
      //图表展示的时候
      window.console.log(row);
      this.items = row.data;
      window.console.log(row.data);
      this.zuijiahaoma =
        row["anumber"] + "、" + row["bnumber"] + "、" + row["cnumber"];
      this.zuijiacount = row.data.length;
      this.dialogFormVisible = true;
    },
    async opendialogtubiao(row) {
      //此处为展示用户选择的数据号码，进行相应的图表展示，同时按照年-月进行有效分区
      this.dialogTitle = "图表展示";
      this.dialogtubiaoVisible = true;
      this.colorList = [];
      let spiltData = Object.create(this.tableData);
      let tubiaodata = {};
      //此处进行深拷贝，避免由于处理导致表格数据产生了变化。
      for (let index = 0; index < spiltData.length; index++) {
        let dataArrays = spiltData[index]["dataArrays"];
        let timearr = dataArrays[3].toString().split("/");
        let month = timearr[0] + "/" + timearr[1];
        let day = parseInt(timearr[2]);
        //设计key值为104/05
        // tubiaodata[month][day] = dataArrays;
        if (tubiaodata.hasOwnProperty(month)) {
          //   tubiaodata[month].push([[day].concat(dataArrays)]);
          tubiaodata[month][day] = spiltData[index];
        } else {
          //   tubiaodata[month] = [[day].concat(dataArrays)];
          tubiaodata[month] = {};
          tubiaodata[month][day] = spiltData[index];
        }
        window.console.log(row);
        //把里面所有符合对应间距的abc值全部找出来
        if (dataArrays.indexOf(row["anumber"]) > -1) {
          //该行已经找到a值，此时往下找b值
          let ab_index = parseInt(row.ab_index) + index;
          if (ab_index >= spiltData.length) {
            continue;
          }
          let barr = spiltData[ab_index]["dataArrays"];
          if (barr.indexOf(row["bnumber"]) > -1) {
            //该行已经找到a值，此时往下找c值
            let bc_index = ab_index + parseInt(row.bc_index);
            if (bc_index >= spiltData.length) {
              continue;
            }
            let carr = spiltData[bc_index]["dataArrays"];
            if (carr.indexOf(row["cnumber"]) > -1) {
              //成功找到c值，把abc两个颜色指定一下。
              let color = this.randomHexColor();
              this.colorList[row["anumber"] + ":" + dataArrays[0]] = color;
              this.colorList[row["bnumber"] + ":" + barr[0]] = color;
              this.colorList[row["cnumber"] + ":" + carr[0]] = color;
            }
          }
        }
      }
      window.console.log(this.colorList);
      //   window.console.log(tubiaodata);
      //   this.tubiaodata = tubiaodata;
      this.tubiaodata = tubiaodata;
      //   this.items.length = 0;
      //   this.items = idss;
      this.colornumber = [row["anumber"], row["bnumber"], row["cnumber"]];
      this.zuijiahaoma =
        row["anumber"] + "、" + row["bnumber"] + "、" + row["cnumber"];
      this.zuijiacount = row.data.length;
      //   window.console.log(this.colornumber);
      //   window.console.log(this.items);
    },
    sortBy(field) {
      return function (a, b) {
        return a[field] - b[field];
      };
    },
    async suanfa() {
      //灰太狼2号算法
      this.tableData = this.getObjsToArray(this.tableData);
      this.tongjiTabledata = [];
      let spiltData = Object.create(this.tableData);
      //此处进行深拷贝，避免由于处理导致表格数据产生了变化。
      const cnumbers = spiltData.pop()["dataArrays"]; //把最后1行固定为c值
      spiltData.reverse(); //数组逆序，因为要从后向前推进
      for (let index = 0; index < spiltData.length; index++) {
        if (index >= 10) {
          continue;
          //b值只往上推进10行
        }
        let arr = spiltData[index]["dataArrays"];
        let bnumber = 0;
        let cnumber = 0;
        let anumber = 0;
        let ab_index = 0;
        let bc_index = 0;
        if (this.percent < 100) {
          this.percent = this.percent + 10;
        }
        window.console.log(this.percent);
        for (let y = 4; y < arr.length - 1; y++) {
          cnumber = cnumbers[y];
          for (let i = 4; i < arr.length - 1; i++) {
            //进度加载
            //循环输出b值
            bnumber = arr[i];
            for (let j = 1; j <= 10; j++) {
              //查找上方10行，同时也要注意总数据条数是否大于10行
              if (parseInt(index) + j < spiltData.length) {
                let aarr = spiltData[parseInt(index) + j]["dataArrays"];
                //循环输出b值
                for (let ij = 4; ij < aarr.length - 1; ij++) {
                  //循环输出b值
                  anumber = aarr[ij];
                  bc_index = index + 1;
                  ab_index = j;
                  this.suanfabianli(
                    anumber,
                    bnumber,
                    cnumber,
                    ab_index,
                    bc_index
                  );
                }
              }
            }
          }
        }
      }

      let data = [];
      for (let obj in this.countChazhi) {
        let o = this.countChazhi[obj];
        data.push(o);
      }
      data.sort(this.sortBy("count"));
      this.tongjiTabledata = data;
      setTimeout(() => {
        this.loading.close();
      }, 10000);
    },
    suanfabianli(anumber, bnumber, cnumber, ab_index, bc_index) {
      //根据传递进来的算式来遍历在总期数
      let spiltData = Object.create(this.tableData);
      for (let index = 0; index < spiltData.length; index++) {
        let aarr = spiltData[index]["dataArrays"];
        let bindex = index + ab_index;
        if (aarr.indexOf(anumber) > -1) {
          if (bindex >= spiltData.length) {
            continue;
            //当出现b值超出索引，则进行跳过操作
          }
          let barr = spiltData[bindex]["dataArrays"];
          if (barr.indexOf(bnumber) > -1) {
            let cindex = bindex + bc_index;
            if (cindex >= spiltData.length) {
              continue;
              //当出现b值超出索引，则进行跳过操作
            }
            let carr = spiltData[cindex]["dataArrays"];
            if (carr.indexOf(cnumber) > -1) {
              let key = [anumber, bnumber, cnumber, ab_index, bc_index].join(
                ":"
              );
              //设计key值为2:4
              if (this.countChazhi.hasOwnProperty(key)) {
                this.countChazhi[key]["count"] =
                  this.countChazhi[key]["count"] + 1;
                this.countChazhi[key]["data"].push([aarr, barr, carr]);
              } else {
                this.countChazhi[key] = {
                  count: 1,
                  data: [],
                  anumber: anumber,
                  bnumber: bnumber,
                  cnumber: cnumber,
                  ab_index: ab_index,
                  bc_index: bc_index,
                };
                this.countChazhi[key]["data"].push([aarr, barr, carr]);
                // { "11:103000262": "red" },此处加载所有要显示颜色
              }

              //   window.console.log("this.colorList", this.colorList);
            }
          }
        }
      }
    },
    //条件搜索前端看此方法
    onSubmit() {
      this.page = 1;
      this.pageSize = 10;
      this.getTableData();
      this.tableData = this.getObjsToArray(this.tableData);
      window.console.log(1, this.tableData);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    tableRowClassName({ row, rowIndex }) {
      console.log(row, rowIndex);
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },

    closeDialog() {
      this.dialogFormVisible = false;
    },
    closedialogtubiaoVisible() {
      this.dialogtubiaoVisible = false;
    },
    openDialog() {
      this.type = "create";
      this.dialogFormVisible = true;
    },

    getObjValue(obj) {
      //把对象属性的值转换为array
      var arr = [];
      for (let i in obj) {
        arr.push(obj[i]); //属性
      }
      return arr;
    },
    getObjsToArray(objs) {
      //把大量对象的属性转化为列表。
      for (let obj in objs) {
        objs[obj]["dataArrays"] = this.getObjValue(objs[obj]);
      }
      return objs;
    },
  },
  async created() {
    this.page = 1;
    this.pageSize = 10000;
    let query = this.$route.query;
    this.searchInfo = query;
    await this.getTableData();
    await this.getDict("sys_project_id");
    await this.suanfa();
  },
  mounted() {
    this.loading = this.$loading({
      lock: true,
      text: "请等待计算",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });
    // this.drawLine(0);
    // this.drawLine(0);
    // this.drawLine(60);
  },
};
</script>

<style>
</style>
